En Pczeros he visto una explicación muy sencilla para que las visitas puedan cambiar el color de fondo del blog con un simple click, se trata de un gadget con unas imágenes a modo de cuadritos que bien pueden ser cualquier otra imagen, dicha imagen funciona con el evento onclick y al marcar sobre ella cambia el color de fondo del blog.
Para probar he creado unas imágenes de muestra que como decía pueden sustituirse por otras creadas por nosotros, la forma de añadirlo es muy sencilla simplemente copiamos el siguiente código y lo añadimos allí donde deseamos mostrarlo, si se trata de un gadget escogeremos para añadirlo HTML/Javascript.
<div style="text-align: center;">
<a href="#" onclick="javascript:document.body.style.backgroundColor='#AA0104'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3n1g27H5IP9lpUlorH8GBmoKVX2tzlYifyvdoA4bwKxSBFpxzuJdkXW5VB8Zm_3-eSqrJ8Zmk3XLcdmkyYlEWQN2xlceGfZfHLwAw1RamJ7BgZrHJl4okhibLMe9PjKifegE/s0/rojo2.jpg" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#199686'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwkwJdcnQcsf8L_tedSozDsan_0duazFnVtsUQE5hKGeOqLegCC0EalCb9IEY4FltdYBaZG3zhGBzIkrdn65mSC7fIFUbbhpZSGc2g1DzCHyHHOnjSXUNuxoOtFxEjKUD_QMv/s0/azul1.jpg" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH7SMNnea1XM7wwsAKO3lMkOH6sQjDvWtflS392qF4yF9J-F5yxodKGsyeiaW2mIW5m2ykWrPQbBVJBRvD9FPyMji_g87X7IB_grmJX6CJKCDRQksg5Je3A4BfqU93tbfFKVT-/s0/blanco4.jpg" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihRkta2VuNOfYq3nm9uwfF5LBMx42tOUb0MdCtvfmJxOBxgUvylN6ZBHYgQzvC3fQvJ_TlGOUuzKNOcYPoPe33twHhPXPnqVsG2z9b0q3wiXH8uuiQSqTINug1KTeqd6PlxpYZ/s0/negro3.jpg" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#EB6E14'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4UzrkIFljnNU5svvjW2dnONSkvhLhxsnjNzoCuevt9sthssuTkDU4KgQF4kLpACCDvajQbIrYvm4VctbsJHHWrl7sxeibCwWS9L3mMPR3Gu3J9W5596z3RaYDQ2QsqF-NF1z/s0/naranja6.jp" /></a>
</div>
Esto es una imagen, para ver el ejemplo click sobre ella.
Cada cuadrito es una imagen y la url de cada imagen será el enlace que hará cambiar el color de fondo de body.
Si seguimos jugando descubrimos que también es posible hacerlo con texturas en lugar de colores, lo conseguimos de la siguiente forma:
<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsSR1yvuKkJ4gYf3kT2LNBTil2JHcJObOXs1Wj9hHMwTASMe6epqNz9DVJypA4z2-XspMkvpIYncq3anxaZizCExhEcNroobqolzh6Y812DjEquBmfC-VUOr2jndfdUU6NpD4/s200/fondo1.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsSR1yvuKkJ4gYf3kT2LNBTil2JHcJObOXs1Wj9hHMwTASMe6epqNz9DVJypA4z2-XspMkvpIYncq3anxaZizCExhEcNroobqolzh6Y812DjEquBmfC-VUOr2jndfdUU6NpD4/s200/fondo1.jpg" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXkSHwPm4JZRQ5HMn9DH0EmJn2cWSSSKlgNWEBC0LT662Slo-RsJ7fnOnzb_m7jLCfpZo_dpsZDj8CVk1j2-5vdP-ANjhS08OpsKgtE5m3UDiJKmJP0Pb9ozDSuh1t0eYHfaT/s200/fondo2.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXkSHwPm4JZRQ5HMn9DH0EmJn2cWSSSKlgNWEBC0LT662Slo-RsJ7fnOnzb_m7jLCfpZo_dpsZDj8CVk1j2-5vdP-ANjhS08OpsKgtE5m3UDiJKmJP0Pb9ozDSuh1t0eYHfaT/s200/fondo2.jpg" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_lstxN2OLqVL4_GjBwap8PA0jymIUJ8v6n6JoxVryxpa9TE_HP-713MzGNQZIuNH40liSAC3LFni0joR09IV52eqhbc8BOI08251JBs3E0h7hTU2ohI9XraDpTfR53y5lL52/s200/fondo3.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_lstxN2OLqVL4_GjBwap8PA0jymIUJ8v6n6JoxVryxpa9TE_HP-713MzGNQZIuNH40liSAC3LFni0joR09IV52eqhbc8BOI08251JBs3E0h7hTU2ohI9XraDpTfR53y5lL52/s200/fondo3.jpg" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4E_8-Uhh8KgbCmU4lNZV1Ijr5KGTLEKqk0hSW_46spobLNWEOFJIXXzT60a5X2w5s8X4qvy2RA-G7gFCme2Ipy_YgLiyH3PW4T_bX6qldhh-3qBb97fc_GXaRPHdkkahgNCy/s200/fondo4.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4E_8-Uhh8KgbCmU4lNZV1Ijr5KGTLEKqk0hSW_46spobLNWEOFJIXXzT60a5X2w5s8X4qvy2RA-G7gFCme2Ipy_YgLiyH3PW4T_bX6qldhh-3qBb97fc_GXaRPHdkkahgNCy/s200/fondo4.jpg" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhObJTz8PQGAiDR-MjChjOGUWv0BxyjRiFdQso18aIh75L1DShZ-ufdjjCr0DsJRJC1zt7AM6zGT5OrazyqjRygZLfrhWBeRCMtQMN3HBQUxEy9ILL1_817Xrk91PK5gpqVVlg/s200/fondo5.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhObJTz8PQGAiDR-MjChjOGUWv0BxyjRiFdQso18aIh75L1DShZ-ufdjjCr0DsJRJC1zt7AM6zGT5OrazyqjRygZLfrhWBeRCMtQMN3HBQUxEy9ILL1_817Xrk91PK5gpqVVlg/s200/fondo5.jpg" /></a>
</div>
Como se puede ver hemos cambiado backgroundColor por backgroundImage, es necesario añadir la url de la imagen dos veces una para el fondo y otra para la miniatura que mostramos.
El tamaño de las miniaturas lo podemos modificar con width para la anchura y height para la altura.
La verdad es que las páginas web (incluidos los blogs) con muchos efectos me resultan... como describirlo... poco serios, y en consecuencia, poco confiables. Por ello evito el exceso de efectos, sin embargo creo que este en particular puede ser útil. Si alguien, yo incluido, crea una página con fondo café y escribe sobre él con letras verdes, los daltónicos del mundo (8% de la población) tengamos problemas y requiramos un cambio de fondo.
gracias GEM@
:: A mi me resultan molestos Atonau, distraen bastante pero para gustos los colores :S ese detalle que comentas sobre el problema de los daltónicos no lo había pensado, es un buen dato a tener en cuenta y lo tendré presente para futuros diseños de plantillas.
Gracias por comentar y bienvenido :D
:: Saludos N.G. - C.W. que tengas un lindo día :)
Gracias GEM@, por cierto, recibiste mi correo? :S
:: Lo he visto ahora mismo, ahí va tu petición ;)
Sobre buscadores
Aumentar disminuir texto del blog
Son ejemplos con un efecto sencillo y que personalmente me gustan mucho, es mas, en mi blog añadí uno porque una vez entre a una página web y me gustó mucho que habia una transliteración de colores de fondo.
Ademas como dices, es para cambiar pequeñas cositas de fondo.
Puedes ver un pequeño ejemplo en funcionamiento, y lo único de raro que le añadí fue jugar un poco con los efectos de Prototype + Scripaculous. :)
Ahí te envio mi voto, tu blog sigue siendo muy bonito. Saludos. :D
:: ¡¡Qué buena idea Felipe!! tengo que probar ese efecto me encanta :)
Gracias por el voto :D :D :D
:D Con gusto... de todo corazón te deseo muchos exitos, estas que te sales.
Si, hay buenos efectos en la librería en Github con los que vale la pena jugar un ratico. ;)
:: Buen enlace Felipe mil gracias de verdad!!
Muy buenoooo! :D Como hago para que no se repita? :S
Gracias Gem@, como siempre
:: Para qu eno se repita qué fede?
Para fijar la imagen y no se vuelva a repetir una y otra vez. Gracias :)
:: Tendría que ver eso que dices Fede sin verlo nosé dónde está el problema :S
Buen dia,
Gema tengo una duda con este script, no habra una forma de que el fondo que ha seleccionado el usuario quede? osea que cada vez que el entre este ese fondo a menos que lo vuelva a cambiar el, o que el fondo cambio automaticamente cada vez que ingrese al blog. mcuhas gracias por la pronta respuesta.
me encanta este efecto para uno de mis blogs quedaría genial. ¿existe la posibilidad de hacer lo mismo pero que lo que cambie sea la cabecera? lo he intentado toquetear, pero creo que lo hago mal y no lo consigo :$
Nota: solo los miembros de este blog pueden publicar comentarios.